<template>
	<div id="ywStatistics">
		<height-chart :title="title">
			<div id="ywStatistics_echartBOX"></div>
		</height-chart>
	</div>
</template>

<script>
import heightChart from 'components/content/heightChart/heightChart';

import echarts from 'echarts';

import { getDeptOrderTypeRepairs } from '../../../network/home';
export default {
	name: 'ywStatistics',
	data() {
		return {
			timer: null
		};
	},
	props: {
		title: {
			type: String,
			default: '统计类目'
		}
	},
	components: {
		heightChart
	},

	mounted() {
		this.setEchart();
		this.timer = setInterval(() => {
			this.setEchart();
		}, 30000);
	},
	beforeDestroy() {
		if (this.timer) {
			//如果定时器还在运行 或者直接关闭，不用判断
			clearInterval(this.timer); //关闭
			console.log('左上关闭');
		}
	},
	methods: {
		setEchart() {
			getDeptOrderTypeRepairs().then((res) => {
				if (res.code == '200') {
					const dataSource = []
					let nums = res.data.deptNameList.length;
					for(let i=0;i<nums;i++){
						let str = {'name':res.data.deptNameList[i],'value':Number(res.data.countList[i])};
						dataSource.push(str);
					}
					// const dataSource = [
					//    { name: '大豆', value: 580 },
					//    { name: '小麦', value: 536 },
					//    { name: '土豆', value: 500 },
					//    { name: '土豆', value: 350 },
					//    { name: '番茄', value: 300 },
					//    { name: '韭菜', value: 280 },
					//    { name: '油麦菜', value: 240 },
					//    { name: '青椒', value: 0 },
					//    { name: '青椒', value: 200 },
					//    { name: '青椒', value: 200 },
					//    { name: '青椒', value: 200 },
					//    { name: '青椒', value: 200 },
					// ];
					let dataSourcemax = 0;
					dataSource.forEach((item) => {
						dataSourcemax += item.value;
					});
					const color = ['#975fe4', '#45a5ff', '#81c926', '#7585a2', '#fad337', '#f2637b', '#ff8e49', '#37cbcb', '#01ffa2', '#01c6ff', '#01ffe4', '#c001ff', '#ff0184'];
					let salvProMax = [
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax,
						dataSourcemax
					];
					var option = {
						grid: [
							{
								left: 40,
								top: 40,
								right: 50,
								bottom: 10,
								containLabel: true
							}
						],
						xAxis: [
							{
								gridIndex: 0,
								type: 'value',
								axisLabel: { show: false },
								axisLine: { show: false },
								splitLine: { show: false },
								axisTick: { show: false }
							},
							{
								gridIndex: 0,
								type: 'value',
								max: 100,
								axisLabel: { show: false },
								axisLine: { show: false },
								splitLine: { show: false },
								axisTick: { show: false }
							}
						],
						yAxis: [
							{
								gridIndex: 0,
								type: 'category',
								inverse: true,
								data: dataSource.map((item) => item.name),
								axisTick: { show: false },
								axisLine: { show: false },
								splitLine: { show: false },
								position: 'left',
								axisLabel: {
									width: 80,
									padding: [0, 0, 0, -50],
									align: 'left',
									formatter: (name, index) => {
										return `{value|${name}}`;
									},
									rich: {
										value: {
											color: '#fff',
											fontSize: 12,
											fontWeight: 500
										}
									}
								}
							},
							{
								gridIndex: 0,
								type: 'category',
								position: 'right',
								inverse: true,
								margin: 20,
								data: dataSource.map((item) => item.name),
								axisTick: { show: false },
								axisLine: { show: false },
								splitLine: { show: false },
								axisLabel: {
									align: 'right',
									padding: [0, -40, 0, 0],
									formatter: (_, index) => {
										let numshow = ((dataSource[index].value / dataSourcemax) * 100).toFixed(2);
										if(numshow == NaN || numshow=='NaN'){
											return `{value|0%}`;
										}else{
											return `{value|${numshow}%}`;
										}
									},
									rich: {
										value: {
											color: '#fff',
											fontSize: 12,
											fontWeight: 500
										}
									}
								}
							}
						],
						series: [
							{
								z: 1,
								type: 'bar',
								xAxisIndex: 0,
								yAxisIndex: 0,
								barWidth: 10,
								data: dataSource.map((item) => item.value),
								silent: true,
								itemStyle: {
									emphasis: {
										barBorderRadius: [0, 20, 20, 0]
									},
									normal: {
										// barBorderRadius: [0, 20, 20, 0],
										barBorderRadius: [30, 30, 30, 30],
										color: function (params) {
											return color[params.dataIndex];
										},
										// 柱状图上显示数字
										label: {
											show: true, // 开启显示
											position: 'insideRight', // 在上方显示
											// offset: [0, -20], //  5以上用水平垂直
											textStyle: {
												// 数值样式
												fontSize: 12,
												color: '#fff',
												fontWeight: 500,
												padding: [0, 0, 25,0] // 5以上版本无效
											}
										}
									}
								}
							},
							{
								z: 3,
								name: '背景',
								type: 'bar',
								barWidth: 10,
								barGap: '-100%',
								data: salvProMax,
								itemStyle: {
									normal: {
										color: function (params) {
											return color[params.dataIndex];
										},
										opacity: 0.3,
										barBorderRadius: [30, 30, 30, 30]
									}
								}
							}
						]
					};

					echarts.init(document.getElementById('ywStatistics_echartBOX')).setOption(option);
				}
			});
		}
	}
};
</script>

<style scoped>
#ywStatistics_echartBOX {
	width: 100%;
	height: 404px;
}
</style>
